{% extends "../../base.html" %}

{% block crumbs %}
<div class="row">
    <div class="col-md-12">
        <ol class="breadcrumb"> 
            <li class="active">
                <a class="this">System setting</a>
            </li>
            <li class="active">
                <a class="this-page" href="/atp4p/user/">User management</a>
            </li>
            <li class="active">
                <a class="">New user</a>
            </li>
        </ol>

    </div>
</div>
{% endblock %}

{% block body %}
<style>
	.form-group{
		display: flex;
	}
	.control-label{
		text-align: right;
	}
</style>

<div class="row">
    <div class="col-md-12">
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">New user</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" method="post" id="form_save">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">User name</label>
                        <div class="col-sm-6">
                            <input type="text" name="username" class="form-control" onkeyup="value=value.replace(/[^0-9a-zA-Z]/g,'')" placeholder="English letters or numbers">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Password</label>
                        <div class="col-sm-6">
                            <input type="password" name="password" class="form-control" autocomplete="new-password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-6">
                            <input type="text" name="email" placeholder="Email address is required for administrator" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Is admin</label>
                        <div class="col-sm-6">
                            <select name="is_superuser" class="form-control">
                                <option value=0>false</option>
                                <option value=1>true</option>
                            </select>
                        </div>
                    </div>
                    <div align="center">
                    	<input type="button" name="Submit" class="btn btn-primary" onclick="javascript:history.back(-1);" value="Back">
                        <button type="button" class="btn btn-primary" onclick="save()">Save</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>
{% endblock%}

{% block javascript %}
<script>
    function save() {
    	var data = $("#form_save").serialize();
    	$.ajax({
			type: 'POST',
			url: "/atp4p/user/add/",
			data: data,
			contentType: "application/x-www-form-urlencoded;charset=UTF-8",
			success: function(res){
				var code = res.code;
				if(code == 0){
					alert("Created successfully!")
				}else{
					alert("Failed to create!"+res.msg)
				}
			},
			error: function(res){
				alert("Failed to create!")
			}
		});
    };
 </script>
{% endblock %}